<template>
	<view class="wait-receive">
		<scroll-view :scroll-top="scrollTop" style="height:100vh; " scroll-y="true" show-scrollbar="true"
			@scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
			<view class="order-list">
				<view v-for="(order, index) in waitReceiveOrders" :key="index" class="order-item">
					<view class="order-header">
						<image class="product-image" :src="productImage" mode="aspectFill"></image>
						<view class="product-details">
							<text class="product-name">{{ order.w_name }}</text>
							<text class="product-count">x{{ order.quantity }}</text>
						</view>
					</view>
					<view class="order-info">
						<text class="order-status wait-receive-status">{{order.status}}</text>

					</view>
					<view class="action-buttons">
						<u-button size="small" shape="circle"
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" text="确认收货"
							@click="confirmReceive(order.id)"></u-button>

					</view>
				</view>
			</view>
			<view v-if="waitReceiveOrders.length === 0" class="no-order">
				<text>暂无待收货订单</text>
			</view>
		</scroll-view>
		<u-back-top top="400" icon="arrow-up" :right="backTopData.right" :customStyle="backTopData.customStyle"
			:bottom="backTopData.bottom" :icon="backTopData.icon" :mode="backTopData.mode"
			:iconStyle="backTopData.iconStyle" :duration="backTopData.duration" :scrollTop="scrollTop"
			@click="backToTop()"></u-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				waitReceiveOrders: [],
				productImage: 'http://img06.jiuxian.com/2024/0111/17a8113edc3c46cf91261b1c29e574135.jpg',
				status: "待收货",
				currentPage: 1, // 当前页数
				totalPage: 1, // 总页数
				scrollTop: 0,
				backTopData: {
					mode: 'circle',
					icon: 'arrow-upward',
					bottom: 100,
					customStyle: {
						backgroundColor: '#cecece',
					},
					iconStyle: {
						color: "#ffffff",
					},
					right: 20,
					duration: 300
				},
			};
		},
		mounted() {
			this.getStatus()
		},
		computed: {

			userId() {

				return this.$store.state.uid
			}
		},
		methods: {
			upper() {},
			async lower() {
				console.log("jdjfkjkdjf");
				if (this.currentPage < this.totalPage) {
					this.currentPage++;
			
					await this.getStatus();
				}
			},
			scroll(e) {
				console.log(e);
				this.scrollTop = e.detail.scrollTop;
			},
			backToTop() {
				this.scrollTop = 0
			},
			async getStatus() {

				const param = {
					status: this.status,
					userId: this.userId,
					current: this.currentPage,
					size: 10
				}
				const res = await this.$request.get('/system/logistics-order/getByStatus', param)
				console.log(res);
				if (res.code === 200) {
					this.waitReceiveOrders = this.waitReceiveOrders.concat(res.data.list.records)
					this.totalPage = res.data.list.pages;
				} else {

				}
			},
			async confirmReceive(reservation_id) {
				console.log(reservation_id);
				console.log('确认收货', this.waitReceiveOrders);
				// 处理确认收货逻辑
				const param = {
					id: reservation_id
				}
				const res = await this.$request.post('/system/logistics-order/userReceived', param)
				console.log(res);
				if (res.code === 200) {

					this.waitReceiveOrders = this.waitReceiveOrders.filter(order => order.id !==
						reservation_id);
				} else {

				}
			},
			contactSeller(index) {
				console.log('联系卖家', this.waitReceiveOrders[index]);
				// 处理联系卖家逻辑
			},
		},
	};
</script>

<style>
	.wait-receive {
		padding: 0;
		/* 去除内边距 */
	}

	.order-list {
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.order-item {
		border-bottom: 1px solid #eee;
		padding: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0;
		/* 去除订单项之间的间距 */
	}

	.order-header {
		display: flex;
		align-items: center;
	}

	.order-status {
		font-size: 14px;
	}

	.wait-receive-status {
		color: #ff6600;
	}

	.order-info {
		display: flex;
		align-items: center;
	}

	.product-image {
		width: 60px;
		height: 60px;
		border-radius: 4px;
		margin-right: 10px;
	}

	.product-details {
		display: flex;
		flex-direction: column;
	}

	.product-name {
		font-size: 16px;
		color: #333;
		margin-bottom: 5px;
	}

	.product-count {
		font-size: 14px;
		color: #999;
	}

	.action-buttons {
		display: flex;
		align-items: center;
	}

	.confirm-receive-button,
	.contact-seller-button {
		background-color: #ff6600;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 8px 12px;
		font-size: 14px;
		margin-right: 10px;
		cursor: pointer;
	}

	.contact-seller-button {
		background-color: #fff;
		color: #ff6600;
		border: 1px solid #ff6600;
	}

	.no-order {
		margin-top: 20px;
		text-align: center;
		color: #999;
	}
</style>